<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气{{info}}</h2>
        <button @click="ishot = !ishot">切换天气</button>
    </div>
   <script type="text/javascript">
    new Vue({
        el:'#root',
        data: {
            ishot: false
        },
        computed: {
            info() {
              return  this.ishot? "炎热":"凉爽"
            }
        },
        watch: {
            // ishot: {
            //     immediate: true, //初始化时执行
            //     deep: true, //深度监视
            //     handler(newVal, oldVal) {
            //         console.log("ishot改变了",newVal,oldVal);
            //     }
            // }
            // 简写形式
            ishot(newVal, oldVal) {
                console.log("ishot改变了",newVal,oldVal);
            }
        }
    })
   </script>
</body>
</html>